<template>
  <div class="home">
    <div class="h-ul">
        <li class="h-li"  v-for="item in listData" :key="index">
          <span class="h-label">{{item.label}}</span>
          <span class="h-count">{{item.count}}</span>
        </li>
    </div>
     <div class="h-top">
        <div class="map-order">
            <div class="map" id="map"></div>
        </div>
      </div> 

      <div class="h-bottom">
        <div class="h-left" id="h-leftA"></div>
        <div class="h-middle" id="hMiddle"></div>
        <div class="h-right" id="hRight"></div>
      </div>
  </div>
</template>

<script>
import {queryListData, queryUserData,queryBarGraphThree, queryBarGraphThreeA, queryLineChart} from '@/request/api'
export default {
 data(){
   return{
     listData:[
       {label:'注册客户量',count:'5'},
       {label:'当日在线司机数量',count:''},
       {label:'订单总量',count:''},
       {label:'交易额',count:''}
    ],
    //饼状图假数据
      response:{
        msg:'OK',
        success:1,
        data:[
          {name:'白糖',value:234.0},
          {name:'冰糖',value:213.0},
          {name:'红糖',value:432.0},
          {name:'黄糖',value:145.0},
          {name:'薄荷糖',value:325.0},
          {name:'麦芽糖',value:234.0},
          {name:'葡萄糖',value:213.0},
          {name:'夹心糖',value:432.0},
          {name:'棉花糖',value:145.0},
          {name:'气泡糖',value:325.0},
          {name:'咖啡糖',value:325.0}
        ],
      },
      nowDay:'',
      nowDay2:'',
      nowDay3:'',
      beforeDay:'',
      barGraphThree: [],
      //中间曲线图假数据
      response1:{
          msg:'OK',
          success:1,
          data:{
            names:['05-30','05-31','06-01','06-02','06-03','06-04','06-05','06-06','06-07','06-08','06-09'],
            counts:{
              TY:[1,2,3,2,0,1,2,0,1,1,2],
              SY:[1,2,3,0,1,2,3,2,3,3,2,],
            }
          },
        },
      userData: {
        msg: 'OK',
        success: 1,
        data: {
          names: [],
          onecounts: [],
          twocounts: [],
        },
      },
      //柱状图假数据
      response2:{
          msg:'OK',
          success:1,
          data:{
            names:['2019-06','2019-07','2019-08','2019-09','2019-10','2019-11','2019-12','2020-01','2020-02','2020-03','2020-04','2020-05','2020-06'],
            //  names:['2019-06','2019-07','2019-08','2019-09','2019-10','2019-11',],
            counts:[0,0,0,0,0,0,0,0,0,0,15,33,5],
            // counts:[0,0,0,15,33,5],
          },
      },
      barGraphThreeA: {
        echartse: [{
          name:'',
          data:[]
        }],
        XRoller:[],
        unit:['']
      },
      //折线图假数据
      response3:{
          msg:'OK',
          success:1,
          data:{
            names:['2019-06','2019-07','2019-08','2019-09','2019-10','2019-11','2019-12','2020-01','2020-02','2020-03','2020-04','2020-05','2020-06'],
            counts:[0,0,0,0,0,0,0,0,0,0,0,0,33289]
          },
      },
      LineChart1:{
          msg: 'OK',
          success: 1,
          data: {
            names: [],
            counts: [],
        },
      }
   }
 
 },
 created(){
 },
 mounted(){
   this.railwayCargo()
   this.ColumnChart()
   this.LineChart()
   this.getListData()
  this.railwayCargo1A()
 },
 methods:{

   getListData(){
     queryListData().then(res =>{
       if(res.success==='1'){
         this.listData[1].count=res.data[0].driverNums
         this.listData[2].count=res.data[0].orderNums
         this.listData[3].count=res.data[0].totalMoney
       }
     })
   },
   getNames(time){
     var toda = new Date(time);
     var M = (toda.getMonth() + 1 < 10 ? '0' + (toda.getMonth() + 1) : toda.getMonth() + 1) + '-';
     var D = toda.getDate() < 10 ? '0' + (toda.getDate()) : toda.getDate();
     return M+D;
   },
   getDay(day) {　　

     if(day !== 'undefined'){
         let today = new Date();　　
                let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;　　
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                let tYear = today.getFullYear();　　
                let tMonth = today.getMonth()+1;　　
                let tDate = today.getDate();　　
                if (tMonth >= 1 && tMonth <= 9) {
                   tMonth = "0" + tMonth;
                }
                if (tDate >= 0 && tDate <= 9) {
                  tDate = "0" + tDate;
                }
                return tYear + "-" + tMonth + "-" + tDate;
     }

              
  },
 
   //中间曲线图 
   railwayCargo1A(){
      this.nowDay = this.getDay(0);
      this.beforeDay=this.getDay(-11);
      queryUserData({nowDay:this.nowDay,beforeDay:this.beforeDay}).then(res => {
          if(res.success==='1'){
            let box = []
            let boxA= []
            let boxB = [] 
            res.data.forEach(item=>{        
            let box = item.orderTime
            let boxA = item.orderNums
            let boxB = item.wayBillNums
            this.userData.data.names.push(box);
            this.userData.data.onecounts.push(boxA);
            this.userData.data.twocounts.push(Number(boxB));
            })
            console.log(this.userData.data.onecounts)
            console.log(this.userData.data.twocounts)
          setTimeout(()=>{
            this.railwayCargo1()
          },400)
          }
      })
   },
   //中间曲线图 
    railwayCargo1(){
      let _this = this
      let myChart = this.$echarts.init(document.getElementById('map'))
      myChart._dom.children[0].style.margin = '0 auto'
      let data = [
        {
          name:'订单数',
          type:'line',
          smooth: true,
          data:this.userData.data.onecounts
        },{
          name:'运单数',
          type:'line',
          smooth: true,
          data: this.userData.data.twocounts
        }
      ]
      var date = this.userData.data.names;
      myChart.clear()
      myChart.setOption({
          title: {
            text: '订单/运单走势图'
        },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        color:[
          '#d14a61',
          '#000'
        ],
        legend: {                  // 图例
          orient: 'horizontal', // 布局方式，默认为水平布局 '水平' ¦ '垂直'  'horizontal' ¦ 'vertical' 
          x: 'center',          // 水平位置 'left' ¦ 'right' ¦ 'center' ¦ '数值' ¦ '百分数' 
          y:'10',             // 垂直位置 'top' ¦ 'bottom' ¦ 'center' ¦ '数值' ¦ '百分数' 
          data: ['订单数','运单数','sss'],
          textStyle: {   
            color: '#000',          
            fontSize: 14,                          
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {  
            color: '#CCCCCC',           
            fontSize: 16                         
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#CCCCCC',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#CCCCCC',
              fontSize : 16      //更改坐标轴文字大小
            },
          },
          data: date
        },
      
        yAxis: {
          type: 'value',
          // name:'订单/运单走势图',
          nameTextStyle: {  
            color: '#000',           
            fontSize: 16 ,                 
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#CCCCCC',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#CCCCCC',
              fontSize : 16      //更改坐标轴文字大小
            },
          },
          boundaryGap: [0, '40%']
        },
        grid: {
          top: '12%',   // 等价于 y: '16%'
          left: '2%', 
          right: '4%',
          bottom: '6%',
          containLabel: true
        },
        series: data

      })
    },

  // 饼图
    railwayCargo(){
      queryBarGraphThree().then(res =>{
        if(res.success==='1'){
          this.barGraphThree=res.data
          setTimeout(()=>{
            this.hLeft()
          },500)
        }
      })
    },
    // 饼图
   hLeft(pars){
     let _this = this
      let myChart = this.$echarts.init(document.getElementById('h-leftA'))
      myChart._dom.children[0].style.margin = '0 auto'
      myChart.clear()
      var echartse = JSON.parse(JSON.stringify(this.barGraphThree)) 
      var arr = [];
      for (var i = 0; i < echartse.length; i++) {
        arr[i] = echartse[i].name;
      }
      myChart.setOption({
          title: {
            text: '货类统计',
            left: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              orient: 'vertical',
              x: 'left',     
              y:'center', 
              data:arr
          },
          series: [
              {
                  name: '货类统计',
                  type: 'pie',
                  radius: '55%',
                  center: ['70%', '60%'],
                  data:echartse,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
   },
   //柱状图
   ColumnChart(){
     this.nowDay2=this.getDay(0)
     queryBarGraphThreeA({nowDay:this.nowDay2}).then(res =>{
       if(res.success==='1'){
         let hu = []
         let hu1 = []
         res.data.forEach(item =>{
           let hu = item.wayBillNums
           let hu1 = item.orderTime
           this.barGraphThreeA.echartse[0].data.push(hu)
           this.barGraphThreeA.XRoller.push(hu1)
         })
          setTimeout(()=>{
            this.ColumnChartA()
          },600)
       }
     })
  },
    //柱状图
    ColumnChartA(){
      let _this = this
      let myChart = this.$echarts.init(document.getElementById('hMiddle'))
      myChart._dom.children[0].style.margin = '0 auto'
      myChart.clear()
      let echartse = this.barGraphThreeA.echartse
      let XRoller = this.barGraphThreeA.XRoller
      let data = this.barGraphThreeA.data
      let unit = this.barGraphThreeA.unit
      let itemStyle = {
        normal: {
          // color:'rgba(194,85,82)',
          color:'#C23531',
          label: {
            show: false, //开启显示
            position: 'top', //在上方显示
            textStyle: { //数值样式
              color: '#CCCCCC',
              fontSize: 16
            }
          }
        }
      }
      for (let i = 0; i < echartse.length; i++) {
        echartse[i].type = 'bar';                       //bar柱状图 line 折线图
        echartse[i].barWidth = '60%';              //柱形宽度
        echartse[i].itemStyle = itemStyle;  

      }
      let nameTitle01 = '运单统计'
      myChart.setOption({
        // 标题
        title : {
          text: nameTitle01,            //主标题 轴
          x: 'center',                     
          y: '0',  
          textStyle: {
            color: '#000',
            fontWeight: '1000',
            fontSize: 17
          }                 
        },
      tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {                  // 图例
          orient: 'horizontal', // 布局方式，默认为水平布局 '水平' ¦ '垂直'  'horizontal' ¦ 'vertical' 
          x: 'right',          // 水平位置 'left' ¦ 'right' ¦ 'center' ¦ '数值' ¦ '百分数' 
          y:'10',             // 垂直位置 'top' ¦ 'bottom' ¦ 'center' ¦ '数值' ¦ '百分数' 
          data: data,
          textStyle: {   
            color: '#CCCCCC',          
            fontSize: 14,                          
          }
        },
        grid: {
          show:false,                 //---是否显示直角坐标系网格
          containLabel:true,         //---grid 区域是否包含坐标轴的刻度标签
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '3%'
        },
        xAxis : [
          {
            show:true,                     //---是否显示
            name: unit[1],               //---轴名称
            data : XRoller,
            nameTextStyle: {  
              color: '#CCCCCC',           
              fontSize: 12                      
            },
            axisLine: {            // 坐标轴线
              show: true,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle控制线条样式
                color: '#CCCCCC',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#CCCCCC',
                fontSize : 14     //更改坐标轴文字大小
              },
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            name: unit[0],              //---轴名称
            nameTextStyle: { 
              color: '#CCCCCC',            
              fontSize: 16,                          
            },
            axisLine: {            // 坐标轴线
              show: true,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle控制线条样式
                color: '#CCCCCC',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#CCCCCC',
                fontSize : 14      //更改坐标轴文字大小
              },
            }
          }
        ],
        series : echartse,
      })
    },
    //折线图
    LineChart(){
      this.nowDay3=this.getDay(0)
      queryLineChart({nowDay:this.nowDay3}).then(res =>{
        if(res.success==='1'){
          let huhu = []
          let huhu1 = []
          res.data.forEach(item =>{
            let huhu = item.orderTime
            let huhu1 = item.orderMoney
            this.LineChart1.data.names.push(huhu)
            this.LineChart1.data.counts.push(huhu1)
          })
          setTimeout(()=>{
          this.LineChartA()
        },200)
        }
      })
    },
     //折线图
    LineChartA(){
      let _this = this
      let myChart = this.$echarts.init(document.getElementById('hRight'))
      myChart._dom.children[0].style.margin = '0 auto'
      let data = [
        {
          type:'line',
          smooth: false,
          data:this.LineChart1.data.counts
        }
      ]
      var date = this.LineChart1.data.names;
      myChart.clear()
      myChart.setOption({
          title: {
            text: '交易金额',
            left:'center'
        },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        color:[
          '#d14a61',
          '#000'
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {  
            color: '#CCCCCC',           
            fontSize: 14                         
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#CCCCCC',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#CCCCCC',
              fontSize : 14      //更改坐标轴文字大小
            },
          },
          data: date
        },
      
        yAxis: {
          type: 'value',
          // name:'订单/运单走势图',
          nameTextStyle: {  
            color: '#000',           
            fontSize: 14 ,                 
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#CCCCCC',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#CCCCCC',
              fontSize : 14     //更改坐标轴文字大小
            },
          },
          boundaryGap: [0, '40%']
        },
        grid: {
          top: '12%',   // 等价于 y: '16%'
          left: '2%', 
          right: '8%',
          bottom: '6%',
          containLabel: true
        },
        series: data

      })
    }
 }
}
</script>

<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
  padding: 30px;
  .h-li{
    display: inline-block;
    width: calc(25% - 34px);
    height: 108px;
    background-color: #fff;
    margin: 0 15px;
    -webkit-box-shadow: 4px 4px 40px rgba(0,0,0,.05);
    box-shadow: 4px 4px 40px rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.05);
    position: relative;
    .h-label{
          font-size: 16px;
          font-weight: bolder;
          color: rgba(0,0,0,.45);
          display: inline-block;
          width: 40%;
          height: 100%;
          line-height: 108px;
          vertical-align: top;
          text-align: center;
      }
      .h-count {
          font-size: 28px;
          width: 40%;
          display: inline-block;
          height: 100%;
          line-height: 108px;
          vertical-align: top;
      }
  }
  .h-top{
    margin: 40px 15px 15px 15px;
    height: 370px;
    background-color: #fff;
    padding-bottom: 20px;
    position: relative;
    .map-order {
        padding-top: 20px;
        height: 100%;
        width: 100%;
    }
    .map{
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 370px;
      padding: 0px;
      margin: 0px;
      border-width: 0px;
      cursor: default;
    }
  }
  .h-bottom{
    height: 300px;
    background-color: #fff;
    margin: 15px;
    margin-top: 30px;
    position: relative;
    .h-left,.h-middle,.h-right{
      // border: 1px solid red;
      width: calc(33% - 34px);
      margin: 0 15px;
      display: inline-block;
      height: 100%;
      padding-top: 20px;
      box-sizing: border-box;
    }
  }
}

</style>

